<template>
<view class="quickConsultationContent">
	<view class="headerTips">
		<view class="headerTips-list">
			<image :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
			<view class="chatBox">
				<view class="text">您好，我将收集您的爱宠信息，为您推荐合适的宠物医生。</view>
			</view>
			
			
		</view>
		<view class="headerTips-list">
			<image :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
			<view class="chatBox">
				<view class="text">您的宠物是什么种类?</view>
			</view>
		</view>
	</view>
	
	<view class="quickConsultation-select">
		<view class="quickConsultation-select-title">
			请选择对应选项
		</view>
		<view class="quickConsultation-select-content">
			<view class="quickConsultation-select-content-inner">文字选项1</view>
			<view class="quickConsultation-select-content-inner">文字选项2</view>
			<view class="quickConsultation-select-content-inner">文字选项3</view>
			<view class="quickConsultation-select-content-inner">文字选项4</view>
		</view>
		
		<view class="quickConsultation-select-title">
			请选择对应选项
		</view>
		<view class="quickConsultation-select-content">
			<view class="quickConsultation-select-content-innerImg">
				<image class="image" :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
			</view>
			<view class="quickConsultation-select-content-innerImg">
				<image class="image" :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
			</view>
			<view class="quickConsultation-select-content-innerImg">
				<image class="image" :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
			</view>
		</view>
		
		<view class="quickConsultation-select-title">
			请选择对应选项
		</view>
		<view class="quickConsultation-select-content">
			<view class="quickConsultation-select-content-includeInput">
				<view class="quickConsultation-select-content-includeInput-title">
					选项1
				</view>
				<input placeholder="请输入要补充的话…" class="quickConsultation-select-content-includeInput-input" type="text" />
			</view>
			<view class="quickConsultation-select-content-includeInput">
				<view class="quickConsultation-select-content-includeInput-title">
					选项2
				</view>
				<input placeholder="请输入要补充的话…" class="quickConsultation-select-content-includeInput-input" type="text" />
			</view>
		</view>
		
		<view class="quickConsultation-select-title">
			可能的疾病
		</view>
		
		<view class="quickConsultation-select-tips">
			根据权威医学书籍，根据您的回答，做出的智能评估如下（评估供参考，实际判断以医生诊断后的结果为主）
		</view>
		
		<scroll-view class="quickConsultation-select-list" scroll-x="true" bindscroll="scroll" style="width: 100%">
			<view class="quickConsultation-select-list-inner">
				<view class="quickConsultation-select-list-inner-header">
					<view class="quickConsultation-select-list-inner-header-left">
						<text class="quickConsultation-select-list-inner-header-left1">90</text><text class="quickConsultation-select-list-inner-header-left2">%</text>
						<text class="quickConsultation-select-list-inner-header-left3">鼻窦炎</text>
					</view>
					<view class="quickConsultation-select-list-inner-header-right">
						<image :src="`${prefix_image}/homepage/IntegralRecord/icon-right.png`" mode="aspectFill" />
					</view>
				</view>
				
				<view class="quickConsultation-select-list-inner-content">
					<view class="quickConsultation-select-list-inner-content-tip1">
						与您症状相似的10人中，6人患有此病
					</view>
					<view class="quickConsultation-select-list-inner-content-list">
						<text class="quickConsultation-select-list-inner-content-list-left">就医建议：</text>
						
						<text class="quickConsultation-select-list-inner-content-list-right">持续观察，如果症状加重，请及时就医</text>
						
					</view>
					<view class="quickConsultation-select-list-inner-content-list">
						<text class="quickConsultation-select-list-inner-content-list-left">就诊科室：</text>
						<text class="quickConsultation-select-list-inner-content-list-right">耳鼻喉科</text>
					</view>
				</view>
				
			</view>
			<view class="quickConsultation-select-list-inner">
				<view class="quickConsultation-select-list-inner-header">
					<view class="quickConsultation-select-list-inner-header-left">
						<text class="quickConsultation-select-list-inner-header-left1">90</text><text class="quickConsultation-select-list-inner-header-left2">%</text>
						<text class="quickConsultation-select-list-inner-header-left3">鼻窦炎</text>
					</view>
					<view class="quickConsultation-select-list-inner-header-right">
						<image :src="`${prefix_image}/homepage/IntegralRecord/icon-right.png`" mode="aspectFill" />
					</view>
				</view>
				
				<view class="quickConsultation-select-list-inner-content">
					<view class="quickConsultation-select-list-inner-content-tip1">
						与您症状相似的10人中，6人患有此病
					</view>
					<view class="quickConsultation-select-list-inner-content-list">
						<text class="quickConsultation-select-list-inner-content-list-left">就医建议：</text>
						
						<text class="quickConsultation-select-list-inner-content-list-right">持续观察，如果症状加重，请及时就医</text>
						
					</view>
					<view class="quickConsultation-select-list-inner-content-list">
						<text class="quickConsultation-select-list-inner-content-list-left">就诊科室：</text>
						<text class="quickConsultation-select-list-inner-content-list-right">耳鼻喉科</text>
					</view>
					<view class="quickConsultation-select-list-inner-content-list">
						<text class="quickConsultation-select-list-inner-content-list-left">就诊科室：</text>
						<text class="quickConsultation-select-list-inner-content-list-right">耳鼻喉科</text>
					</view>
				</view>
				
			</view>
		</scroll-view> 
		
		
		
	</view>
</view>
		<button @click="open">打开弹窗</button>
		<!-- 弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup-content">
				<view class="popup-content-header">
					<image :src="`${prefix_image}/homepage/IntegralRecord/payPop.png`" mode="aspectFill" />
					<view class="popup-content-header-tips">
						挂号成功，快去付费吧~
					</view>
				</view>
				
				<view class="popup-content-bottom">
					去付费
				</view>
			</view>	
		</uni-popup>
</template>
<script>
import { defineComponent, toRefs, reactive, ref } from "vue"
import config from '@/hooks/useConfig.js'

export default {
	data() {
		const { prefix_image }=config()
		return {
			prefix_image
		}
	},
	
	methods: {
		open() {
				this.$refs.popup.open('center')
			},
	}
	// setup() {
	// 	const { prefix_image }=config()
	// 	const data = reactive({
	// 		prefix_image
	// 	})
		
	// 	const open = () => {
	// 		const popup = ref(null)  
	// 		console.log(popup, "popup")
	// 		    // popup.value.open(type)  

	// 	}
	// 	return {
	// 		...toRefs(data),
	// 		open
	// 	}
	// }
}
</script>

<style lang="stylus" scoped>
.quickConsultationContent{
	background: #F5F5F5;
	min-height: 100vh;
	overflow: hidden;
	
	.headerTips{
		margin: 32rpx;
		.headerTips-list{
			display: flex;
			margin-bottom: 30rpx;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				
			}
			.chatBox{
				padding: 8rpx 30rpx;
				// border: 1rpx solid #ededed;
				border-radius: 5rpx;
				position: relative;
				background-color: #fff;
				flex: 1;
				margin-left: 50rpx;
				display: flex; 
				align-items: center;
				.text{
					background-color: #fff;
					
					text-align: justify;
				}
				.text:after{
					content:'';
					position:absolute;
					right:100%;
					top: 20rpx;
					width:0;
					height:0;
					border-width:10rpx;
					border-style:solid;
					border-color:transparent;
					border-right-width:16rpx;
					border-right-color:currentColor;
					color:#fff;
				}
			}
			
		}
	}
	.quickConsultation-select{
		margin: 40rpx 32rpx 0rpx 32rpx;
		.quickConsultation-select-title{
			font-size: 44rpx;
			// font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin-bottom: 40rpx;
		}
		.quickConsultation-select-content{
			display: flex;
			flex-wrap: wrap;
			.quickConsultation-select-content-inner{
				background-color: #fff;
				font-size: 26rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				width: 218rpx;
				height: 108rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 16rpx;
				margin-right: 16rpx;
			}
			.quickConsultation-select-content-inner:nth-child(3n){
				margin-right: 0rpx;
			}
			.quickConsultation-select-content-innerImg{
				display: flex;
				margin-right:16rpx;
				margin-bottom: 16rpx;
				image{
					width: 218rpx;
					height: 218rpx;
					border-radius: 8px;
					border: 4px solid #FFD300;
					box-sizing: border-box;
				}
			}
			.quickConsultation-select-content-innerImg:nth-child(3n){
				margin-right: 0rpx;
			}
			.quickConsultation-select-content-includeInput{
				.quickConsultation-select-content-includeInput-title{
					width: 686rpx;
					height: 108rpx;
					background: #FFFDF2;
					border-radius: 54rpx;
					border: 4rpx solid #FFD300;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 24rpx;
				}
				.quickConsultation-select-content-includeInput-input{
					width: 686rpx;
					height: 108rpx;
					background: #E7E7E7;
					border-radius: 54rpx;
					
					font-size: 32rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-bottom: 40rpx;
					padding-left: 32rpx;
					box-sizing: border-box;
				}
			}
		}
	}

	.quickConsultation-select-tips{
		font-size: 28rpx;
		// font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		padding-bottom: 24rpx;
	}
	.quickConsultation-select-list{
		white-space: nowrap;
		
		// height: 404rpx;
		// padding: 46rpx 32rpx 0rpx 32rpx;
		box-sizing: border-box;
		.quickConsultation-select-list-inner{
			width: 572rpx;
			// height: 404rpx;
			padding: 32rpx 24rpx;
			background-color: #fff;
			border-radius: 16rpx;
			display: inline-block;
			margin-right: 24rpx;
			box-sizing: border-box
			.quickConsultation-select-list-inner-header{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.quickConsultation-select-list-inner-header-left{
					.quickConsultation-select-list-inner-header-left1{
						font-size: 72rpx;
						// font-family: GenJyuuGothic-P-Bold, GenJyuuGothic-P;
						font-weight: bold;
						color: #FFD300;
					}
					.quickConsultation-select-list-inner-header-left2{
						font-size: 36rpx;
						// font-family: GenJyuuGothic-P-Bold, GenJyuuGothic-P;
						font-weight: bold;
						color: #FFD300;
						padding-left: 6rpx;
					}
					.quickConsultation-select-list-inner-header-left3{
						font-size: 36rpx;
						// font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #333333;
						padding-left: 24rpx;
					}
				}
				.quickConsultation-select-list-inner-header-right{
					display: flex;
					image{
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
			.quickConsultation-select-list-inner-content{
				display: flex;
				flex-direction: column;
				.quickConsultation-select-list-inner-content-tip1{
					font-size: 28rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					padding-bottom: 44rpx;
					white-space: pre-wrap;
				}
				.quickConsultation-select-list-inner-content-list{
					display: flex;
					padding-bottom: 32rpx;
					.quickConsultation-select-list-inner-content-list-left{
						font-size: 28rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						
						
					}
					.quickConsultation-select-list-inner-content-list-right{
						font-size: 28rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						white-space: pre-wrap;
						color: #666666;
					}
				}
			}
		}
	}
}
.popup-content{
	width: 600rpx;
	height: 410rpx;
	background: #EFF0F5;
	border-radius: 16rpx;
	.popup-content-header{
		height : 301rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		image{
			width: 172rpx;
			height: 166rpx;
		}
		.popup-content-header-tips{
			font-size: 32rpx;
			// font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #111111;
			padding-top: 24rpx;
		}
	}
	.popup-content-bottom{
		font-size: 32rpx;
		// font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #111111;
		background-color: #fff;
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
	}
}


.scroll-view_H{
  white-space: nowrap;
  border-bottom: 1rpx solid rgba(0,0,0, 0.08);
  height: 108rpx;
  padding: 46rpx 32rpx 0rpx 32rpx;
  box-sizing: border-box;
  .service-list-text{
	  width: 60rpx;
	  margin-left: 64rpx;
	  font-size: 30rpx;
	  font-weight: 400;
	  color: #666666;
	  height: 108rpx;
  }
  .service-list-text:first-of-type{
	  margin-left: 0rpx;
  }
  .service-list-text.active{
	  font-size: 30rpx;
	  // font-family: PingFangSC-Semibold, PingFang SC;
	  font-weight: 600;
	  color: #333333;
	  position: relative;
  }
  .service-list-text.active:after{
		content: '';
	    width: 28rpx;
	    height: 1px;
	    // display: block;
	    margin: 0 auto;
	    border-bottom: 2px solid #333;
	    padding: 1px;
		position: absolute;
		bottom: -15rpx;
		left: 0rpx;
  }
}
</style>
